<template>
	<view class="content">
		<u-sticky style="background: #fff;">
			<topbar title='思维导图' :userInfo="userInfo" @success="successHandel" :mindMapType="true" :showAddFile="false" />
			<u-tabs :current="current" :list="list" lineWidth="30" lineColor="#4C75FF" :scrollable="false" :activeStyle="{
				color: '#4C75FF'
			}" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" @change="changeHandel" />

		</u-sticky>

		<swiper class="swiper" :current="current" @animationfinish="animationfinish">
			<swiper-item class="swiper-item" v-for="(item, index) in list" :key="index">

				<scroll-view style="height: 100%;" scroll-y="true" class="scroll-Y">

					<u-cell-group>
						<view v-for="(item2, index2) in swiperList" :key="index2">

							<u-cell size="large" :title="item2.name" :label="item2.createTime" @click.stop="deteleHandel(item2)">
								<!-- <u-icon slot="icon" size="40" :name="item2.type === 1 ? 'file-text' : 'grid-fill'"
									color="#4C75FF"></u-icon> -->

								<u-icon slot="icon" size="40"
									:custom-prefix="item2.type === 1 ? 'custom-icon-naotu custom-icon' : 'custom-icon-wenjianjia custom-icon'"
									color="#4C75FF"></u-icon>

								<view slot="value" @click.stop="moreHandel(item2)">
									<u-icon slot="icon" size="20" name="more-dot-fill" color="#4C75FF"></u-icon>
								</view>
							</u-cell>

						</view>

					</u-cell-group>

					<u-empty v-if="swiperList.lenght == 0" mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"
						text="暂时没有数据" textSize="18" />

				</scroll-view>




			</swiper-item>
		</swiper>

		<!-- <u-empty marginTop="100" icon="http://cdn.uviewui.com/uview/empty/permission.png" text="您还未登录，登录后享受更多精彩~"
      :show="!isLogin" textColor="#191F25" textSize="18">
      <slot>
        <u-button type="primary" text="登录" @click="loginHandel()"></u-button>
      </slot>

    </u-empty> -->

		<u-popup :show="show" @close="close" :customStyle="popupStyle">
			<view class="file_name">{{ fileObj.name }}</view>
			<view class="menu">

				<!-- <u-icon v-if="showShare" name="share-square" color="#4C75FF" size="35" label="协作/分享" labelPos="bottom" open-type="share"></u-icon> -->
				<button open-type="share" v-if="showShare && queryType != 'DELETE'">
					<u-icon name="share-square" color="#4C75FF" size="35" label="协作/分享" labelPos="bottom"></u-icon>
				</button>


				<u-icon name="share" v-if="!teamStatus" color="#4C75FF" size="35" label="转存" labelPos="bottom"
					@click="zhuancunModel"></u-icon>

				<u-icon v-else name="eye" color="#4C75FF" size="35" label="预览" labelPos="bottom" @click="preview"></u-icon>



				<u-icon name="edit-pen" color="#4C75FF" size="35" label="重命名" labelPos="bottom" @click="rename"></u-icon>

				<u-icon v-if="showMove && queryType != 'DELETE'" name="cut" color="#4C75FF" size="35" label="移动"
					labelPos="bottom" @click="moveHandel"></u-icon>

				<u-icon v-if="queryType != 'DELETE'" name="trash" color="#4C75FF" size="35" label="删除" labelPos="bottom"
					@click="delHadel"></u-icon>


				<u-icon v-else name="reload" color="#4C75FF" size="35" label="还原" labelPos="bottom"
					@click="reductionHandel"></u-icon>


				<u-icon v-if="queryType == 'DELETE'" name="trash" color="#4C75FF" size="35" label="彻底删除" labelPos="bottom"
					@click="comDelHanldel"></u-icon>

			</view>
		</u-popup>





		<u-modal :show="showModal" title="修改文件名" @cancel="cancel" @confirm="confirm" :showCancelButton="true">
			<view class="slot-content">
				<u--input placeholder="请输入文件名称" border="surround" v-model="fileName"></u--input>
			</view>
		</u-modal>


		<u-modal :show="zhuancunModelShow" title="选择转存团队" :showCancelButton="true" @cancel="zhuancunModelShow = false"
			@confirm="zhauncunConfirm">

			<u--form labelPosition="left" :model="model" labelWidth="80" ref="uForm">
				<u-form-item label="团队" prop="zhuancunTeam" borderBottom @click="zhauncunpicker = true;" ref="item1">
					<u--input v-model="zhuancunTeam" disabled disabledColor="#ffffff" placeholder="请选择模板"
						border="none"></u--input>
				</u-form-item>
			</u--form>

			<u-picker :show="zhauncunpicker" ref="uPicker" @cancel="zhauncunCancel" @confirm="zcConfirm" :columns="zcColumns"
				@change="zhuancunChange" keyName="creatorName"></u-picker>


		</u-modal>


		<u-modal :show="comDel" title="确定是否彻底删除？" @confirm="delConfirm" @cancel="delCancel" :showCancelButton="true"
			:closeOnClickOverlay="true"></u-modal>


		<u-modal :show="moveModal" title="选择文件夹" @cancel="moveCancel" @confirm="moveConfirm" :showCancelButton="true">
			<view class="slot-content">
				<u--form labelPosition="left" :model="folderName" labelWidth="80" ref="uForm">


					<u-form-item label="目标文件夹" prop="folderName" borderBottom ref="item" @click="treepickerShow">
						<u--input v-model="folderName" disabled disabledColor="#ffffff" border="none"></u--input>
					</u-form-item>

				</u--form>

				<!-- <u-picker :show="pickerShow" ref="uPicker" @cancel="pickerCancel" @confirm="pickerConfirm" :columns="columns"
          @change="changeHandler" keyName="name" /> -->

				<!-- <treepicker ref="treePicker" :multiple='false' @select-change="selectChange" title="选择文件夹" :localdata="columns"
          valueKey="folderId" textKey="name" childrenKey="children"></treepicker> -->

				<mytreepicker ref="treePicker" :multiple="false" :range="columns" :foldAll="true" rangeKey="name"
					idKey="folderId" @confirm="treeConfirm" @cancel="treeCancel" :selectParent="true"></mytreepicker>
			</view>
		</u-modal>




		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
import { getUserInfo, getUserFileList, deleteFile, saveFileData, getFolder, delFolder, upDataFolder, reductionFile, reductionFolder, compdelfolder, compdelfile, transfer } from '@/api/api'
import { mapState, mapMutations } from 'vuex'
export default {
	data() {
		return {
			list: [
				{
					name: '全部',
					label: 'NORMAL'
				}, {
					name: '最近',
					label: 'RECENT'
				}, {
					name: '回收站',
					label: 'DELETE'
				}],
			columns: [],
			showShare: true,
			showEye: true,
			showMove: true,
			moveModal: false,
			pickerShow: false,
			comDel: false,
			zhuancunModelShow: false,
			zhauncunpicker: false,
			zhuancunTeam: "",
			zhuancunId: "",
			folderName: "",
			current: 0,
			swiperList: [],
			zcColumns: [[]],
			userInfo: {},
			queryType: "NORMAL",
			type: 2,
			show: false,
			fileName: '',
			fileObj: {},
			showModal: false,
			rules: {
				"folderName": {
					type: 'string',
					required: true,
					message: '请选择文件夹',
					trigger: ['blur', 'change']
				},
			},
		};
	},
	computed: {
		...mapState(['teamStatus', "currentTeamId", "teamList"])
	},
	onShow() {
		getUserInfo().then(res => {
			this.userInfo = res.data
		})
		this.getList({ queryType: this.queryType, folderId: 0, type: this.type })
		this.current = 0
		this.setFolderId("0")
		this.getTeamList()
	},
	onShareAppMessage(res) {
		return {
			title: `分享文件：${this.fileObj.name}`,
			path: `/pages/index/detail/detail?fileId=${this.fileObj.fileId}`
		}
	},
	methods: {
		...mapMutations([
			"personHandel", "teamHandel", "setFolderId", "getTeamList"
		]),

		treeCancel() {
			this.$refs.treePicker._hide()
		},
		treepickerShow() {
			this.$refs.treePicker._show()
		},
		comDelHanldel() {
			this.comDel = true
			this.show = false
		},
		zhuancunModel() {
			this.zhuancunModelShow = true
			this.teamList.forEach(e => {
				if (e.role != 'MEMBER') {
					this.zcColumns[0].push(e)
				}
			})
		},
		zhauncunCancel() {
			this.zhauncunpicker = false
			this.zhuancunModelShow = false
			this.show = false
			this.zcColumns = [[]]
			this.zhuancunTeam = ""
			this.zhuancunTeam = ""
		},
		zcConfirm(e) {
			this.zhuancunTeam = e.value[0].creatorName
			this.zhuancunId = e.value[0].teamId
			this.zhauncunpicker = false
		},
		zhauncunConfirm() {
			transfer({ fileId: this.fileObj.fileId, teamId: this.zhuancunId }).then(res => {
				if (res.code == 200) {
					this.zhauncunCancel()
					this.$refs.uToast.show({
						type: 'success',
						message: "转存成功",
					})
				} else {
					this.zhauncunCancel()
					this.$refs.uToast.show({
						type: 'error',
						message: "转存失败",
					})
				}
			})
		},
		zhuancunChange(e) {
			console.log(e.value[0])
			this.zhuancunTeam = e.value[0].creatorName
			this.zhuancunId = e.value[0].teamId
		},
		delConfirm() {
			if (this.fileObj.type === 1) {
				compdelfile(this.fileObj.fileId).then(res => {
					if (res.code == 200) {
						this.$refs.uToast.show({
							type: 'success',
							message: "删除成功",
						})
						this.getList({ queryType: this.queryType, type: this.type })
						this.comDel = false
					}
				})
			} else {
				compdelfolder(this.fileObj.folderId).then(res => {
					this.$refs.uToast.show({
						type: 'success',
						message: "删除成功",
					})
					this.getList({ queryType: this.queryType, teamId: this.currentTeamId, type: this.type })
					this.comDel = false
				})
			}
		},
		delCancel() {
			this.comDel = false
		},
		moveHandel() {
			this.moveModal = true
			this.show = false
			if (!this.teamStatus) {
				getFolder().then(res => {
					this.columns = res.data
				})
			} else {
				getFolder({ teamId: this.userInfo.teamId }).then(res => {
					this.columns = res.data
				})
			}
		},

		treeConfirm(e) {
			this.folderName = e[e.length - 1].name
			this.fileObj.folderId = e[e.length - 1].folderId
		},

		moveConfirm() {
			saveFileData(this.fileObj).then(res => {
				if (res.code === 200) {
					this.moveModal = false
					this.$refs.uToast.show({
						type: 'success',
						message: "移动成功",
					})
					this.fileObj = {}
					this.folderName = ''
					this.getList({ queryType: this.queryType })
				}
			})
		},

		moveCancel() {
			this.moveModal = false
			this.folderName = ''
		},
		changeHandler(e) {
			this.folderName = e.values[0][e.indexs[0]].name
		},
		pickerCancel() {
			this.pickerShow = false
			this.folderName = ''
		},
		pickerConfirm(e) {
			this.fileObj.folderId = e.values[0][e.indexs[0]].folderId
			this.folderName = e.values[0][e.indexs[0]].name
			this.pickerShow = false
		},
		loginHandel() {
			uni.navigateTo({
				url: '/pages/login/login'
			});
		},
		changeHandel(item) {
			this.current = item.index
			this.queryType = item.label
			this.getList({ queryType: item.label, type: this.type })
		},
		animationfinish(e) {
			this.current = e.detail.current
			this.queryType = this.list[e.detail.current].label
			this.getList({ queryType: this.list[e.detail.current].label, type: this.type })
		},
		deteleHandel(e) {
			if (e.type === 1) {
				uni.navigateTo({
					url: `/pages/index/detail/detail?fileId=${e.fileId}`,
				});
			} else {
				uni.navigateTo({
					url: '/pages/index/folder/folder?item=' + encodeURIComponent(JSON.stringify(e))
				});

			}
		},
		getList(args) {
			if (this.currentTeamId != null) {
				args.teamId = this.currentTeamId
				getUserFileList(args).then(res => {
					this.swiperList = res.data.rows
				})
			} else {
				getUserFileList(args).then(res => {
					this.swiperList = res.data.rows
				})
			}
		},
		moreHandel(e) {
			if (e.type === 1) {
				this.showShare = true
				this.showEye = true
				this.showMove = true
				this.fileObj = e
				this.show = true
			} else {
				this.showShare = false
				this.showEye = false
				this.showMove = false
				this.fileObj = e
				this.show = true
			}
		},
		preview() {
			uni.navigateTo({
				url: `/pages/index/detail/detail?fileId=${this.fileObj.fileId}`,
			});
			this.show = false
		},
		close() {
			this.show = false
		},
		reductionHandel() {
			// 个人
			if (this.fileObj.type == 1) {
				reductionFile(this.fileObj.fileId).then(res => {
					this.show = false
					this.$refs.uToast.show({
						type: 'success',
						message: "还原成功～",
					})
					this.successHandel()
				})
			} else {
				// 团队
				reductionFolder(this.fileObj.folderId).then(res => {
					this.show = false
					this.$refs.uToast.show({
						type: 'success',
						message: "还原成功～",
					})
					this.successHandel()
				})
			}
		},
		delHadel() {
			// 个人
			if (this.fileObj.type == 1) {
				deleteFile(this.fileObj.fileId).then(res => {
					this.show = false
					this.$refs.uToast.show({
						type: 'success',
						message: "删除成功～",
					})
					this.successHandel()
				})
			} else {
				// 团队
				delFolder(this.fileObj.folderId).then(res => {
					this.show = false
					this.$refs.uToast.show({
						type: 'success',
						message: "删除成功～",
					})
					this.successHandel()
				})
			}

		},
		cancel() {
			this.showModal = false
			this.show = false
		},
		confirm(e) {
			this.fileObj.name = this.fileName
			if (this.fileObj.type == 1) {
				saveFileData(this.fileObj).then(res => {
					if (res.code === 200) {
						this.showModal = false
						this.show = false
						this.$refs.uToast.show({
							type: 'success',
							message: "修改成功～",
						})
						this.fileName = ''
						this.fileObj = {}
						this.successHandel()
					}
				})
			} else {
				upDataFolder(this.fileObj).then(res => {
					if (res.code === 200) {
						this.showModal = false
						this.show = false
						this.$refs.uToast.show({
							type: 'success',
							message: "修改成功～",
						})
						this.fileName = ''
						this.fileObj = {}
						this.successHandel()
					}
				})
			}
		},
		rename() {
			this.showModal = true
			this.show = false
		},
		reduction() {

		},
		successHandel() {
			if (!this.teamStatus) {
				this.getList({ queryType: this.queryType, type: this.type })
			} else {
				this.getList({ queryType: this.queryType, teamId: this.currentTeamId, type: this.type })
			}
		},
	}
};
</script>

<style lang="scss" scoped>
button {
	background-color: transparent;
	border: none;
	border-radius: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	cursor: pointer;
	outline: none;
}

button::after {
	border: none;
}

button {
	background-color: #fff;
}

.swiper {
	height: 87.8vh;

}

.swiper-item {
	height: 100%;
}

::v-deep .u-button {
	margin-top: 50rpx;
	width: 200px !important;
	border-radius: 50rpx !important;
	background-color: #4C75FF !important;

	.u-button__text {
		font-size: 18px !important;
	}
}

.menu {
	display: flex;
	justify-content: space-around;
	margin-bottom: 30rpx;
}

.file_name {
	font-size: 40rpx;
	font-weight: 400;
	color: #636363;
	padding: 50rpx 0 0 50rpx;
	margin: 20rpx 0;
}

.slot-content {
	width: 100%;
}
</style>